<template>
  <div class="padding-l-20 padding-r-20 padding-t-20 h-100 table-page">
    <filter-bar>
      <div slot="left-bar">
        <a-space>
          <a-input class="_searchInput position-r" placeholder="请输入角色名称" enter-button v-model="searchForm.name" />
          <a-button
            class="nbcs-btn-search"
            @click="
              page.page = 1;
              getList(page, searchForm);
            "
            >查询
          </a-button>
          <a-button class="nbcs-btn-default" @click="clearObj(searchForm)">重置 </a-button>
        </a-space>
      </div>
      <div slot="right-bar">
        <a-space> </a-space>
      </div>
    </filter-bar>
    <interval-bg></interval-bg>
    <opt-bar>
      <div slot="left-bar">角色管理</div>
      <div slot="right-bar">
        <a-button v-if="permissionsList.add" class="nbcs-btn-main-bg" @click="openAddForm"> 新增角色 </a-button>
      </div>
    </opt-bar>
    <a-table bordered :columns="columns" :data-source="data" :loading="loading"
             :scroll="{ x: 1000, y: tableHeight }"
             :row-key="(record) => record.id" :pagination="pagination">
      <template slot="operation" slot-scope="text, record">
        <a-space size="middle">
          <a @click="openAssignTree(record)" v-if="permissionsList.divide">分配</a>
          <a @click="openRoleEdit(record)" v-if="permissionsList.edit">编辑</a>
          <a-popconfirm v-if="data.length && permissionsList.delete" title="确定删除?" @confirm="() => onDelete(record.id)">
            <a class="table-red-btn">删除</a>
          </a-popconfirm>
        </a-space>
      </template>
    </a-table>
    <add-role-form :visible="showAddForm" @closeAddForm="closeAddForm"></add-role-form>
    <role-assign-tree :visible="showAssignTree" :info="roleInfo" @closeAssignForm="closeAssignForm"></role-assign-tree>
    <role-edit-form :visible="showRoleEdit" :info="roleInfo" @closeEditForm="closeEditForm"></role-edit-form>
  </div>
</template>
<script>
import { del, list } from '@/services/role';
import AddRoleForm from './addRoleForm';
import RoleAssignTree from './roleAssignTree';
import RoleEditForm from './roleEditForm';
import { mapGetters } from 'vuex';
import OptBar from '@/layouts/OptBar';
import FilterBar from '@/layouts/FilterBar';
import IntervalBg from '@/layouts/IntervalBg';
import { clearObj } from '@/utils/util';

export default {
  name: 'role',
  components: { IntervalBg, FilterBar, OptBar, RoleEditForm, RoleAssignTree, AddRoleForm },
  data() {
    return {
      tableHeight: 0,
      searchForm: {
        name: '',
      },
      name: '',
      data: [],
      roleInfo: {},
      showAddForm: false,
      showAssignTree: false,
      showRoleEdit: false,
      columns: [
        // {
        //   title: '序号',
        //   align: 'center',
        //   width: 60,
        //   dataIndex: 'id',
        //   customRender: (text, record, index) => {
        //     return (this.page.page - 1) * this.page.pageSize + index + 1;
        //   },
        // },
        {
          title: '角色',
          dataIndex: 'name',
          width: 150,
          scopedSlots: { customRender: 'name' },
        },
        {
          title: '角色描述',
          dataIndex: 'remark',
          scopedSlots: { customRender: 'remark' },
        },
        {
          title: '操作',
          dataIndex: 'operation',
          key: 'operation',
          fixed: 'right',
          align: 'center',
          scopedSlots: { customRender: 'operation' },
          width: 200,
        },
      ],
      loading: false,
      pagination: {
        showQuickJumper: true, //是否可以快速跳转至某页
        hideOnSinglePage: false, //只有一页时是否隐藏分页器
        showSizeChanger: true, // 显示可改变每页数量
        pageSizeOptions: ['20', '30', '40'], // 每页数量选项
        showTotal: (total) => `共 ${total} 条记录`, // 显示总数
        showSizeChange: (current, pageSize) => (this.pageSize = pageSize), // 改变每页数量时更新显示
      },
      page: {
        page: 1, //分页
        pageSize: 20, // 默认每页显示数量
      },
      permissionsList: {},
    };
  },
  created() {
    this.getList(this.page);
    for (let i in this.permissions) {
      if (this.permissions[i]["operation"].includes("sys:role:add")) {
        this.permissionsList.add = true;
      }
      if (this.permissions[i]["operation"].includes("sys:role:edit")) {
        this.permissionsList.edit = true;
      }
        if (this.permissions[i]["operation"].includes("sys:role:delete")) {
            this.permissionsList.delete = true;
        }
        if (this.permissions[i]["operation"].includes("sys:role:divide")) {
            this.permissionsList.divide = true;
        }

    }
  },
  computed: {
    ...mapGetters('account', ['permissions']),
  },
  mounted() {
      this.tableHeight = document.querySelector('.table-page').clientHeight - 276;
  },
  methods: {
    clearObj,
    getList(page, params) {
      this.loading = true;
      list(
        Object.assign(
          {
            page: page.page,
            pageSize: page.pageSize,
          },
          params
        )
      ).then((res) => {
        this.data = res.data.data.list;
        this.loading = false;
      });
    },
    openAddForm() {
      this.showAddForm = true;
    },
    closeAddForm(val) {
      this.showAddForm = val;
      this.getList(this.page);
    },
    onDelete(id) {
      del(
        Object.assign({
          id: id,
        })
      ).then((res) => {
        if (res.data.code === 0) {
          this.$message.success('删除成功');
          this.getList(this.page);
        }
      });
    },
    openAssignTree(record) {
      this.roleInfo = record;
      this.showAssignTree = true;
    },
    closeAssignForm(val) {
      this.roleInfo = {};
      this.showAssignTree = val;
      this.getList(this.page);
    },
    openRoleEdit(record) {
      this.roleInfo = record;
      this.showRoleEdit = true;
    },
    closeEditForm(val) {
      this.roleInfo = {};
      this.showRoleEdit = val;
      this.getList(this.page);
    },
  },
};
</script>
<style lang="less" scoped>
  .table-page {
    .ant-table-wrapper {
      height: calc(100% - 150px);
    }
  }
</style>
